<template>
  <div class="scroll-container" :style="style">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  height: {
    type: [Number, String]
  }
});

const style = computed(() => {
  return {
    height: props.height + "px"
  };
});
</script>

<style lang="scss" scoped>
.scroll-container {
  overflow-y: scroll;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    // height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px #61b8b31a;
    background: #faad142c;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #57afbb1a;
    border-radius: 10px;
  }
}
</style>
